<template>
    <div>
        <el-container>
            <div :class="[hideSide? 'side':'side_hide']">
                <el-menu default-active="1-3" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" unique-opened>
                    <el-submenu index="1">
                        <template slot="title">
                            <h3>个人</h3>
                        </template>
                        <!-- <el-menu-item @click="changeCurrentComponent('managerIndex')" index="1-1" v-if="userType === 'manager'">经理主页
                        </el-menu-item>
                        <el-menu-item index="1-2" v-if="userType === 'department_manager'">部门主管主页</el-menu-item>
                        <el-menu-item index="1-3" v-if="userType === 'employee'" @click="changeCurrentComponent('employeeIndex')">员工主页</el-menu-item> -->
                        <el-menu-item index="1-3" @click="changeCurrentComponent('employeeIndex')">我的主页</el-menu-item>
                        <el-menu-item index="1-4" @click="changeCurrentComponent('personalInformationManage')">个人信息管理
                        </el-menu-item>
                    </el-submenu>
                    <el-submenu index="2" v-if="userType === 'manager' || userType === 'department_manager'">
                        <template slot="title">
                            <h3>员工管理</h3>
                        </template>
                        <el-menu-item @click="changeCurrentComponent('employeeManage')" index="2-1" v-if="userType === 'manager' || userType === 'department_manager'">员工管理
                        </el-menu-item>
                    </el-submenu>
                    <el-submenu index="3">
                        <template slot="title">
                            <h3>班次管理</h3>
                        </template>
                        <el-menu-item index="3-1" v-if="userType === 'manager' || userType === 'department_manager'"
                            @click="changeCurrentComponent('workShiftManage')">班次管理
                        </el-menu-item>
                        <el-menu-item index="3-2" v-if="userType === 'manager' || userType === 'department_manager'"
                            @click="changeCurrentComponent('workShiftShow')">班次展示
                        </el-menu-item>
                        <el-menu-item index="3-3" v-if="userType === 'employee'" @click="changeCurrentComponent('workShiftShow')">个人班次
                        </el-menu-item>
                        <el-menu-item index="3-4" v-if="userType === 'manager' || userType === 'department_manager'"
                            @click="changeCurrentComponent('clockInOutShow')">打卡情况展示
                        </el-menu-item>
                        <el-menu-item index="3-5" v-if="userType === 'employee'" @click="changeCurrentComponent('clockInOut')">打卡
                        </el-menu-item>
                        <!-- <el-menu-item index="3-6" v-if="userType === 'manager'" @click="changeCurrentComponent('createOvertimeActivity')">创建加班活动
                        </el-menu-item> -->
                        <!-- <el-menu-item index="3-7" v-if="userType === 'employee'" @click="changeCurrentComponent('applyOverTime')">申请加班
                        </el-menu-item> -->
                    </el-submenu>
                    <el-submenu index="4">
                        <template slot="title">
                            <h3>请假管理</h3>
                        </template>
                        <el-menu-item index="4-1" v-if="userType === 'manager' || userType === 'department_manager'"
                            @click="changeCurrentComponent('leaveManage')">请假情况
                        </el-menu-item>
                        <el-menu-item index="4-2" v-if="userType === 'employee'" @click="changeCurrentComponent('leaveStatus')">请假状态
                        </el-menu-item>
                        <el-menu-item index="4-3" v-if="userType === 'employee'" @click="changeCurrentComponent('leaveApplication')">请假申请
                        </el-menu-item>
                    </el-submenu>
                    <el-submenu index="5">
                        <template slot="title">
                            <h3>加班管理</h3>
                        </template>
                        <el-menu-item index="5-1" v-if="userType === 'employee'" @click="changeCurrentComponent('overtimeEmployeeApply')">申请加班</el-menu-item>
                        <el-menu-item index="5-2" v-if="userType === 'employee'" @click="changeCurrentComponent('overtimeEmployeeUser')">加班状态</el-menu-item>
                        <el-menu-item index="5-3" v-if="userType === 'manager' || userType === 'department_manager'"
                            @click="changeCurrentComponent('overtimeManagerUser')">加班管理</el-menu-item>
                        <el-menu-item index="5-4" v-if="userType === 'manager'" @click="changeCurrentComponent('overtimeManagerApply')">创建全局性加班</el-menu-item>
                    </el-submenu>
                </el-menu>
            </div>
            <!-- <el-divider direction="vertical" style=""></el-divider> -->
            <el-container>

                <el-header :class="[hideSide? 'main_header':'main_header_hide']">
                    <div style="float: left;margin-top: 10px;margin-bottom: 10px;">
                        <i class="el-icon-s-home" @click="changeHideSide">折叠</i>
                    </div>
                    <div style="float: right;margin-top: 10px;margin-bottom: 10px;margin-right: 20px;">
                        <i class="el-icon-user-solid">
                            <el-dropdown @command="execCommand">
                                <span class="el-dropdown-link">
                                    {{ userName }}
                                    <i class="el-icon-arrow-down el-icon--right"></i>
                                </span>
                                <el-dropdown-menu slot="dropdown">
                                    <el-dropdown-item command="personalInformation">个人信息</el-dropdown-item>
                                    <el-dropdown-item command="updatePassword" divided>更新密码</el-dropdown-item>
                                    <el-dropdown-item command="logout" divided>退出登录</el-dropdown-item>
                                </el-dropdown-menu>
                            </el-dropdown>
                        </i>
                    </div>
                </el-header>

                <div :class="[hideSide? 'main':'main_hide']">
                    <component :is="currentComponent" v-bind:isShow="true" @changeCurrentCompoent="changeCurrentComponent"></component>
                </div>

            </el-container>
        </el-container>

        <el-dialog :visible="isShowPersonalInformation" :before-close="function (){isShowPersonalInformation = false}">
            <personal-information v-bind:editAble="false" v-on:closePersonalInformation="changeShowPersonalInformation"></personal-information>
        </el-dialog>

        <el-dialog :visible="isShowUpdatePasswordDialog" :before-close="function (){isShowUpdatePasswordDialog = false}">
            <update-password v-on:changePasswordDialog="changeShowPasswordDialog"></update-password>
        </el-dialog>

        <el-dialog :visible="isShowLogoutConfirmDialog" title="退出确认" :before-close="function (){isShowLogoutConfirmDialog=false}">
            <el-button type="primary" @click="this.logout">确认</el-button>
            <el-button @click="isShowLogoutConfirmDialog=false">取消</el-button>
        </el-dialog>

    </div>
</template>

<script>
    import axios from "axios";
    import applyOverTime from "../components/applyOverTime.vue"
    import index from "../components/index.vue";
    import managerIndex from "../components/managerIndex.vue";
    import employeeManage from "../components/employeeManage.vue";
    import personalInformation from "../components/personalInformaion.vue";
    import updatePassword from "../components/updatePassword.vue";
    import createOvertimeActivity from "../components/createOvertimeActivity.vue";
    import workShiftManage from "../components/workShiftManage.vue";
    import workShiftShow from "../components/workShiftShow.vue";
    import workShiftShowMonth from "../components/workShiftShowMonth.vue";
    import clockInOutShow from "../components/clockInOutShow.vue";
    import clockInOut from "../components/clockInOut.vue";
    import leaveApplication from "../components/leaveApplication.vue";
    import leaveStatus from "../components/leaveStatus.vue";
    import leaveManage from "../components/leaveManage";
    import personalInformationManage from "../components/personalInformationManage";

    import employeeIndex from "../components/employeeIndex.vue"

    // 加班管理
    import overtimeEmployeeApply from "../components/overtime/overtimeEmployeeApply.vue"
    import overtimeEmployeeUser from "../components/overtime/overtimeEmployeeUser.vue"
    import overtimeManagerApply from "../components/overtime/overtimeManagerApply.vue"
    import overtimeManagerUser from "../components/overtime/overtimeManagerUser.vue"

    export default {
        name: "mainComponent",
        data: function() {
            return {
                currentComponent: "employeeIndex", // 当前使用的组件名字，String
                userType: this.$store.state.userType, // 当前的用户类型
                userName: this.$store.state.userName,
                isShowPersonalInformation: false, // 状态：是否展示当前的用户个人信息
                isShowUpdatePasswordDialog: false, // 状态：是否展示更改密码窗口
                isShowLogoutConfirmDialog: false, // 状态，是否展示退出确认窗口
                currentDefaultActiveIndex: "1-3",
                hideSide: true, // 是否隐藏菜单栏
            }
        },
        methods: {
            /**
             * 登出，并跳转到登录界面
             */
            logout: function() {
                // console.log("logout");
                var _this = this;
                axios.post("http://127.0.0.1:8000/api/login/")
                    .then(function(response) {
                        // console.log("logout");
                        _this.$store.commit("setUserId", "");
                        _this.$store.commit("setUserName", "");
                        _this.$store.commit("setUserType", "");
                        _this.$router.push("/login");
                    }).catch(function(error) {
                        console.log(error)
                    })
            },
            /**
             * @description 根据在用户的主页面中的点击选择触发合适的时间
             */
            execCommand: function(key) {
                if (key === "logout") {
                    // console.log("this is logout");
                    this.isShowLogoutConfirmDialog = true;
                    // this.logout();
                } else if (key === "personalInformation") {
                    // console.log("personalInformation");
                    this.changeShowPersonalInformation();
                } else if (key === "updatePassword") {
                    this.changeShowPasswordDialog();
                }
            },
            /**
             *  @description 更改当前使用的组件
             */
            changeCurrentComponent: function(componentName) {
                // console.log(componentName);
                // console.log(this.currentDefaultActiveIndex);
                this.currentComponent = componentName;
            },
            /**
             * @description 改变当前是否显示个人信息页面的状态。
             */
            changeShowPersonalInformation: function() {
                this.isShowPersonalInformation = !this.isShowPersonalInformation;
            },
            /**
             * @description 改变当前是否显示个人的更新密码页面
             */
            changeShowPasswordDialog: function() {
                // console.lo
                this.isShowUpdatePasswordDialog = !this.isShowUpdatePasswordDialog;
            },

            /**
             * @获取加班的请求提醒
             */
            getOvertimeReminder: function() {
                var _this = this;
                const h = this.$createElement;

                axios.get("http://127.0.0.1:8000/api/overtime/reminder/")
                    .then(function(response) {
                        response.data.data.forEach(function(item, index) {
                            _this.$notify({
                                title: '加班事项',
                                message: h('i', {
                                    style: 'color: teal'
                                }, item.message)
                            });
                        })
                    })
                    .catch(function(error) {
                        console.log(error);
                    })
            },

            /**
             * @获取请假的请求提醒
             */
            getLeaveReminder: function() {
                var _this = this;
                const h = this.$createElement;

                axios.get("http://127.0.0.1:8000/api/leave/reminder/")
                    .then(function(response) {
                        response.data.data.forEach(function(item, index) {
                            _this.$notify({
                                title: '请假事项',
                                message: h('i', {
                                    style: 'color: teal'
                                }, item.message)
                            });
                        })
                    })
                    .catch(function(error) {
                        console.log(error);
                    })
            },

            /**
             * @获取班次的的提醒
             */
            getWorkshiftReminder: function() {
                var _this = this;
                const h = this.$createElement;

                axios.get("http://127.0.0.1:8000/api/workshift/reminder/")
                    .then(function(response) {
                        _this.$notify({
                            title: '请假事项',
                            message: h('i', {
                                style: 'color: teal'
                            }, response.data.data.message)
                        });
                    })
                    .catch(function(error) {
                        console.log(error);
                    })
            },

            /**
             * @description 更改当前隐藏的状态
             */
            changeHideSide: function() {
                this.hideSide = !this.hideSide;
            }
        },
        mounted: function() {
            this.getOvertimeReminder();
            this.getLeaveReminder();
            this.getWorkshiftReminder();
        },
        components: {
            index,
            managerIndex,
            employeeManage,
            personalInformation,
            updatePassword,
            createOvertimeActivity,
            workShiftManage,
            workShiftShow,
            clockInOutShow,
            clockInOut,
            leaveApplication,
            leaveStatus,
            leaveManage,
            personalInformationManage,
            workShiftShowMonth,
            applyOverTime,

            employeeIndex,

            // 加班管理
            overtimeEmployeeApply,
            overtimeEmployeeUser,
            overtimeManagerApply,
            overtimeManagerUser
        },
    }
</script>

<style>
    .side {
        position: fixed;
        left: 0;
        bottom: 30px;
        top: 0;
        height: 100%;
        width: 20%;
        background-color: #545c64;
    }

    .side_hide {
        display: none;
    }

    .main_header {
        margin-top: 0;
        margin-left: 20%;
        height: 36px;
        width: 80%;
        border-bottom: gray 1px solid;
        background-color: white;
    }

    .main_header_hide {
        margin-top: 0;
        margin-left: 0;
        height: 36px;
        width: 100%;
        border-bottom: gray 1px solid;
        background-color: white;
    }

    .main {
        margin-top: 84px;
        margin-left: 20%;
        text-align: center;
        padding-left: 10%;
        padding-right: 10%;
    }

    .main_hide {
        margin-top: 84px;
        margin-left: 0px;
        text-align: center;
        padding-left: 10%;
        padding-right: 10%;
    }
</style>
